/* -*- mode: c; tab-width: 2; c-tab-always-indent: t; c-basic-offset: 2; comment-column: 0 -*- */

wwwos.Window = new Class({
  Implements: [Options, Events],
  options: {
    template_url:     null,
    header:           '',
    content:          '',
    icon:             '',
    styles:           {'width': 350, 'height': 'auto'},
    position:         {'x': 'center', 'y': 200},
    draggable:        true,
    resizable:        true,    
    show_minimun:     true,
    show_maximun:     true,
    show_close:       true
  },  
  
  status:        'normal',
  dragger:        null,
  enable:         true,
  el:             null,
  lastPosition:   {},
  
  initialize: function(options) {
    this.setOptions(options);
    this.render();
    
    if (this.options.draggable) this.makeDraggable();
    if (this.options.resizable) this.makeResizable();
    this.setPosition(this.options.position);
    this.attachActionEvents();
  },
  
  render: function() {
    var div = new Element('div');
    if (this.options.template_url) {      
      div.load(this.options.template_url);      
    } else {
      var opts = {
        minimun: this.options.show_minimun?'':'none',
        maximun: this.options.show_maximun?'':'none',
        close: this.options.show_close?'':'none',
        header: this.options.header,
        icon: this.options.icon,
        content: this.options.content
      };
      div.innerHTML = wwwos.templates.window.bind(opts);
    }    
    this.el = div.firstChild;
  },
  
  attachActionEvents: function() {
    var actionButtons = this.el.getElement('.header');
    var minimize = actionButtons.getElement('.minimize');
    var maximize = actionButtons.getElement('.maximize');
    var normalize = this.el.getElement('.normalize');
    if (this.options.show_minimun) {
      minimize.addEvent('click', function(e) {
        e.stop();
        this.minimize();
      }.bind(this));
    }
    if (this.options.show_maximun) {
      maximize.addEvent('click', function(e) {
        e.stop();
        this.maximize();
        maximize.parentNode.setStyle('display', 'none');
        normalize.parentNode.setStyle('display', '');
      }.bind(this));
      normalize.addEvent('click', function(e) {
        e.stop();
        this.normalize();
        maximize.parentNode.setStyle('display', '');
        normalize.parentNode.setStyle('display', 'none');
      }.bind(this));
      actionButtons.addEvent('dblclick', function(e) {
        e.stop();
        if (this.status=='normal')
          maximize.fireEvent('click', e);
        else if (this.status=='maximum')
          normalize.fireEvent('click', e);
      }.bind(this));
    }
  },
    
  makeDraggable: function() {
    var header = this.el.getElement('.header');
    header.addClass('movable');
    this.dragger = this.el.makeDraggable({
      'handle': header
    });
  },
  
  makeResizable: function() {
    var wrapper = this.el.getElement('.contentWrraper');
    var startX, left, width;
    wrapper.addClass('resizable');
    this.el.makeResizable({
      handle: wrapper.getElement('.middleBottom'),
      modifiers: {x: false, y: 'height'}
    });
    this.el.makeResizable({
      handle: wrapper.getElement('.leftCol'),
      modifiers: {x: 'width', y: false},
      invert: true,
      onStart: function(el, e) {startX = e.page.x;left=parseInt(el.getStyle('left'));},
      onDrag: function(el, e) {el.setStyle('left', left +(e.page.x-startX))}
    });
    this.el.makeResizable({
      handle: wrapper.getElement('.rightCol'),
      modifiers: {x: 'width', y: false}
    });
    this.el.makeResizable({
      handle: wrapper.getElement('.leftBottom'),
      onStart: function(el, e) {
        startX = e.page.x;
        left=parseInt(el.getStyle('left')); 
        width=parseInt(el.getStyle('width'));
      },
      onDrag: function(el, e) {
        el.setStyles({
          'left': left +(e.page.x-startX),
          'width': width - (e.page.x-startX)
        });
      }
    });
    this.el.makeResizable({handle: wrapper.getElement('.rightBottom')});
  },
  
  calculatePosition: function() {
    var body_coord = document.body.getCoordinates();
    var el_coord = this.el.getCoordinates();
    if (el_coord.width==0 || el_coord.height==0) {
      el_coord.width = parseInt(this.el.getStyle('width'));
      el_coord.height = parseInt(this.el.getStyle('height'));
    }
    var rs = {
      'center': (body_coord.width-el_coord.width)/2,
      'middle': (body_coord.height-el_coord.height)/2,
      'right':  body_coord.width-el_coord.width,
      'bottom': body_coord.height-el_coord.height
    }
    return rs;
  },
  
  toogle: function() {
    if (this.status == 'minimum')
      this.normalize();
    else 
      this.minimize();
  },
  
  minimize: function() {
    this.el.setStyle('display', 'none');
    this.status = 'minimum';
    this.el.fireEvent('minimize', [this]);
  },
  
  normalize: function() {
    if (this.status=='minimum') {
      this.el.setStyle('display', '');
    } else if (this.status=='maximum') {
      this.restorePosition();
      if (this.dragger) this.dragger.attach();
      this.el.getElement('.header').addClass('movable');
    }
    this.status = 'normal';
    this.el.fireEvent('normalize', [this]);
  },
  
  maximize: function() {
    this.storePosition();
    var body_coord = document.body.getCoordinates();
    var height = document.getElement('.taskbar')?body_coord.height-document.getElement('.taskbar').offsetHeight:body_coord.height;
    this.el.setStyles({'left': 0,'top': 0, 'width': body_coord.width, 'height': height-25});
    if (this.dragger) this.dragger.detach();
    this.el.getElement('.header').removeClass('movable');
    this.status = 'maximum';
    this.el.fireEvent('maximize', [this]);
  },
  
  close: function() {
    document.fireEvent('close', [this]);
    this.el.dispose();
  },
  
  setEnable: function() {
    this.el.removeClass('disable');
    this.enable = true;
    this.el.fireEvent('enable', [this]);
  },
  
  setDisable: function() {
    this.el.addClass('disable');
    this.enable = false;
    this.el.fireEvent('disable', [this]);
  },
  
  setPosition: function(pos) {
    var p = this.calculatePosition();
    var x = {'left': 0, 'center': p['center'], 'right': p['right']};
    var y = {'top': 0,'center': p['middle'],'bottom': p['bottom']};
    var posX = $type(pos.x)=='string'?x[pos.x]:pos.x;
    var posY = $type(pos.y)=='string'?y[pos.y]:pos.y;
    this.el.setStyles({'left': posX, 'top': posY});
  }, 
  
  setZIndex: function(num) {
    this.el.style.zIndex = num;
  },
  
  storePosition: function() {
    this.lastPosition = this.el.getStyles('left', 'top', 'width', 'height');
  },
  
  restorePosition: function() {
    this.el.setStyles(this.lastPosition);
  },
    
  getStatus: function() {
    return this.status;
  }
});
